<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-steps class="steps" :current="currentTab">
        <a-step title="填写订单信息" />
        <a-step title="确认订单信息" />
        <a-step title="完成" />
      </a-steps>
      <div class="content">
        <step1 v-if="currentTab === 0" @nextStep="nextStep"/>
        <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
        <step3 v-if="currentTab === 2" :code="code" @prevStep="prevStep" @finish="finish"/>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import step1 from './components/step1'
import step2 from './components/step2'
import step3 from './components/step3'
import storage from 'store'

export default {
  name: 'PurchaseAdd',
  components: {
    step1,
    step2,
    step3
  },
  data () {
    return {
      currentTab: 0,
      code: null
    }
  },
  created () {
    if (this.$route.params.code) {
      this.code = this.$route.params.code
      this.currentTab = 2
    }
  },
  methods: {
    nextStep (code) {
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
      if (this.currentTab === 2) {
        this.code = code
        storage.remove('purchaseDetail')
      }
    },
    prevStep () {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    finish () {
      storage.remove('purchaseDetail')
      this.currentTab = 0
    }
  },
  beforeRouteLeave (to, from, next) {
    storage.remove('purchaseDetail')
    next()
  }
}
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>
